<template>
  <div class="app-container">
    <h2 style="text-align: center">硬笔书详细添加</h2>

    <el-steps
      :active="3"
      process-status="wait"
      align-center
      style="margin-bottom: 40px"
    >
      <el-step title="添加单元课时" />
      <el-step title="添加课时内容" />
      <el-step title="添加生字学习信息" />
    </el-steps>


    <div class="block">
      <el-button type="primary" @click="addTypeface();">添加生字</el-button>
      <el-dialog :title="typefacceTitle" :visible.sync="dialogFormVisible" :before-close="handleClose">
        <el-form ref="form" :rules="dataRule" :model="form" label-width="120px" class="demo-ruleForm">
          <el-form-item label="生字名称："
            prop="name">
            <el-input
                type="name"
                placeholder="请输入内容"
                v-model="form.name"
                style="width: 50%"
                clearable>
              </el-input>
          </el-form-item>
          <el-form-item label="生字图片：" prop="typeface">
            <el-upload 
            class="avatar-uploader" 
            :action="'http://121.41.167.195:8000/api/oss/upload'"
            :on-success="handleAvatarSuccess"
            :auto-upload="true"
            :show-file-list="false">
              <img v-if="form.typeface" :src="form.typeface" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="字体顺序："
              prop="torder">
              <el-input-number v-model="form.torder" controls-position="right" :min="0"></el-input-number>
          </el-form-item>
          <el-form-item label="粉笔视频：" prop="chalkVideo">
            <el-upload
              :on-success="handleUploadChalkVideoSuccess"
              :on-remove="handleUploadChalkVideoRemove"
              :before-remove="beforeVodRemove"
              :on-exceed="handleUploadExceed"
              :file-list="fileChalkVideoList"
              :before-upload="beforeVideoUpload"
              :action="'http://121.41.167.195:8000/api/oss/upload'"
              :limit="1"
              class="upload-demo"
            >
              <el-button size="small" type="primary">上传视频</el-button>
              <el-tooltip placement="right-end">
                <div slot="content">
                  最大支持1G，<br />
                  支持FLV、MP4视频格式上传
                </div>
                <i class="el-icon-question" />
              </el-tooltip>
            </el-upload>
          </el-form-item>
          <!-- <el-form-item label="粉笔视频背景音乐：" prop="chalkVideoBgm">
            <el-upload
              :on-success="handleUploadChalkVideoBgmSuccess"
              :on-remove="handleUploadChalkVideoBgmRemove"
              :before-remove="beforeVodRemove"
              :on-exceed="handleUploadExceed"
              :file-list="fileChalkVideoBgmList"
              :before-upload="beforeAudioUpload"
              :action="'http://121.41.167.195:8000/api/oss/upload'"
              :limit="1"
              class="upload-demo"
            >
              <el-button size="small" type="primary">上传音频</el-button>
              <el-tooltip placement="right-end">
                <div slot="content">
                  最大支持1G，<br />
                  支持MP3音频格式上传
                </div>
                <i class="el-icon-question" />
              </el-tooltip>
            </el-upload>
          </el-form-item>
          <el-form-item label="粉笔视频音频：" prop="chalkVideoDescriptionVideo">
            <el-upload
              :on-success="handleUploadChalkVideoDesVidSuccess"
              :on-remove="handleUploadChalkVideoDesVidRemove"
              :before-remove="beforeVodRemove"
              :on-exceed="handleUploadExceed"
              :file-list="fileChalkVideoDesVidList"
              :before-upload="beforeAudioUpload"
              :action="'http://121.41.167.195:8000/api/oss/upload'"
              :limit="1"
              class="upload-demo"
            >
              <el-button size="small" type="primary">上传音频</el-button>
              <el-tooltip placement="right-end">
                <div slot="content">
                  最大支持1G，<br />
                  支持MP3音频格式上传
                </div>
                <i class="el-icon-question" />
              </el-tooltip>
            </el-upload>
          </el-form-item> -->
          <el-form-item label="粉笔视频解析："
              prop="chalkVideoDescription">
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                style="width: 50%"
                placeholder="请输入内容"
                v-model="form.chalkVideoDescription">
              </el-input>
            </el-form-item>
          <el-form-item label="钢笔视频：" prop="penVideo">
            <el-upload
              :on-success="handleUploadPenVideoSuccess"
              :on-remove="handleUploadPenVideoRemove"
              :before-remove="beforeVodRemove"
              :on-exceed="handleUploadExceed"
              :file-list="filePenVideoList"
              :before-upload="beforeVideoUpload"
              :action="'http://121.41.167.195:8000/api/oss/upload'"
              :limit="1"
              class="upload-demo"
            >
              <el-button size="small" type="primary">上传视频</el-button>
              <el-tooltip placement="right-end">
                <div slot="content">
                  最大支持1G，<br />
                  支持FLV、MP4视频格式上传
                </div>
                <i class="el-icon-question" />
              </el-tooltip>
            </el-upload>
          </el-form-item>
          <!-- <el-form-item label="钢笔视频背景音乐：" prop="penVideoBgm">
            <el-upload
              :on-success="handleUploadPenVideoBgmSuccess"
              :on-remove="handleUploadPenVideoBgmRemove"
              :before-remove="beforeVodRemove"
              :on-exceed="handleUploadExceed"
              :file-list="filePenVideoBgmList"
              :before-upload="beforeAudioUpload"
              :action="'http://121.41.167.195:8000/api/oss/upload'"
              :limit="1"
              class="upload-demo"
            >
              <el-button size="small" type="primary">上传音频</el-button>
              <el-tooltip placement="right-end">
                <div slot="content">
                  最大支持1G，<br />
                  支持MP3音频格式上传
                </div>
                <i class="el-icon-question" />
              </el-tooltip>
            </el-upload>
          </el-form-item>
          <el-form-item label="钢笔视频音频：" prop="penVideoDescriptionVideo">
            <el-upload
              :on-success="handleUploadPenVideoDesVidSuccess"
              :on-remove="handleUploadPenVideoDesVidRemove"
              :before-remove="beforeVodRemove"
              :on-exceed="handleUploadExceed"
              :file-list="filePenVideoDesVidList"
              :before-upload="beforeAudioUpload"
              :action="'http://121.41.167.195:8000/api/oss/upload'"
              :limit="1"
              class="upload-demo"
            >
              <el-button size="small" type="primary">上传音频</el-button>
              <el-tooltip placement="right-end">
                <div slot="content">
                  最大支持1G，<br />
                  支持MP3音频格式上传
                </div>
                <i class="el-icon-question" />
              </el-tooltip>
            </el-upload>
          </el-form-item> -->
          <el-form-item label="钢笔视频解析："
              prop="penVideoDescription">
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                style="width: 50%"
                placeholder="请输入内容"
                v-model="form.penVideoDescription">
              </el-input>
            </el-form-item>
            <el-form-item label="识字视频：" prop="literacyVideo">
            <el-upload
              :on-success="handleUploadLiteracyVideoSuccess"
              :on-remove="handleUploadLiteracyVideoRemove"
              :before-remove="beforeVodRemove"
              :on-exceed="handleUploadExceed"
              :file-list="fileLiteracyVideoList"
              :before-upload="beforeVideoUpload"
              :action="'http://121.41.167.195:8000/api/oss/upload'"
              :limit="1"
              class="upload-demo"
            >
              <el-button size="small" type="primary">上传视频</el-button>
              <el-tooltip placement="right-end">
                <div slot="content">
                  最大支持1G，<br />
                  支持FLV、MP4视频格式上传
                </div>
                <i class="el-icon-question" />
              </el-tooltip>
            </el-upload>
          </el-form-item>
          <!-- <el-form-item label="识字视频背景音乐：" prop="literacyVideoBgm">
            <el-upload
              :on-success="handleUploadLiteracyVideoBgmSuccess"
              :on-remove="handleUploadLiteracyVideoBgmRemove"
              :before-remove="beforeVodRemove"
              :on-exceed="handleUploadExceed"
              :file-list="fileLiteracyVideoBgmList"
              :before-upload="beforeAudioUpload"
              :action="'http://121.41.167.195:8000/api/oss/upload'"
              :limit="1"
              class="upload-demo"
            >
              <el-button size="small" type="primary">上传音频</el-button>
              <el-tooltip placement="right-end">
                <div slot="content">
                  最大支持1G，<br />
                  支持MP3音频格式上传
                </div>
                <i class="el-icon-question" />
              </el-tooltip>
            </el-upload>
          </el-form-item>
          <el-form-item label="识字视频音频：" prop="literacyVideoDescriptionVideo">
            <el-upload
              :on-success="handleUploadLiteracyVideoDesVidSuccess"
              :on-remove="handleUploadLiteracyVideoDesVidRemove"
              :before-remove="beforeVodRemove"
              :on-exceed="handleUploadExceed"
              :file-list="fileLiteracyVideoDesVidList"
              :before-upload="beforeAudioUpload"
              :action="'http://121.41.167.195:8000/api/oss/upload'"
              :limit="1"
              class="upload-demo"
            >
              <el-button size="small" type="primary">上传音频</el-button>
              <el-tooltip placement="right-end">
                <div slot="content">
                  最大支持1G，<br />
                  支持MP3音频格式上传
                </div>
                <i class="el-icon-question" />
              </el-tooltip>
            </el-upload>
          </el-form-item> -->
          <!-- <el-form-item label="识字视频解析："
              prop="literacyVideoDescription">
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                style="width: 50%"
                placeholder="请输入内容"
                v-model="form.literacyVideoDescription">
              </el-input>
            </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="insertTypeface();">保 存</el-button>
        </div>
      </el-dialog>

      <el-dialog title="修改认读" :visible.sync="dialogReadingFormVisible" :before-close="handleReadingClose">
        <el-form ref="readingform" :rules="dataRule2" :model="readingform" label-width="120px" class="demo-ruleForm">
          <el-form-item label="读音："
            prop="pronunciation">
            <el-input
                type="pronunciation"
                placeholder="请输入内容"
                v-model="readingform.pronunciation"
                style="width: 50%"
                clearable>
              </el-input>
          </el-form-item>
          <el-form-item label="结构："
            prop="simplify">
            <el-select v-model="readingform.simplify" placeholder="请选择" style="width: 50%">
              <el-option
                v-for="item in simplifyOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="部首："
            prop="radical">
            <el-input
                type="radical"
                placeholder="请输入内容"
                v-model="readingform.radical"
                style="width: 50%"
                clearable>
              </el-input>
          </el-form-item>
          <el-form-item label="笔画："
            prop="strokes">
            <el-input
                type="strokes"
                placeholder="请输入内容"
                v-model="readingform.strokes"
                style="width: 50%"
                clearable>
              </el-input>
          </el-form-item>
          <el-form-item label="组词："
            prop="wordFormation">
            <el-input
                type="wordFormation"
                placeholder="请输入内容"
                v-model="readingform.wordFormation"
                style="width: 50%"
                clearable>
              </el-input>
          </el-form-item>
          <el-form-item label="成语："
            prop="idiom">
            <el-input
                type="idiom"
                placeholder="请输入内容"
                v-model="readingform.idiom"
                style="width: 50%"
                clearable>
              </el-input>
          </el-form-item>
          <el-form-item label="基本字义："
            prop="description">
            <el-input
                type="description"
                placeholder="请输入内容"
                v-model="readingform.description"
                style="width: 50%"
                clearable>
              </el-input>
          </el-form-item>
          <el-form-item label="认读动图：" prop="movingPicture">
            <el-upload 
            class="avatar-uploader" 
            :action="'http://121.41.167.195:8000/api/oss/upload'"
            :on-success="handleDynamicAvatarSuccess"
            :auto-upload="true"
            :show-file-list="false">
              <img v-if="readingform.movingPicture" :src="readingform.movingPicture" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="语音：" prop="voice">
            <el-upload
              :on-success="handleAudioUploadSuccess"
              :on-remove="handleAudioRemove"
              :before-remove="beforeVodRemove"
              :on-exceed="handleUploadExceed"
              :file-list="fileVoiceList"
              :before-upload="beforeAudioUpload"
              :action="'http://121.41.167.195:8000/api/oss/upload'"
              :limit="1"
              class="upload-demo"
            >
              <el-button size="small" type="primary">上传音频</el-button>
              <el-tooltip placement="right-end">
                <div slot="content">
                  最大支持1G，<br />
                  支持MP3音频格式上传
                </div>
                <i class="el-icon-question" />
              </el-tooltip>
            </el-upload>
          </el-form-item>
          <el-form-item label="认读视频：" prop="video">
            <el-upload
              :on-success="handleUploadReadingVideoSuccess"
              :on-remove="handleUploadReadingVideoRemove"
              :before-remove="beforeVodRemove"
              :on-exceed="handleUploadExceed"
              :file-list="fileReadingVideoList"
              :before-upload="beforeVideoUpload"
              :action="'http://121.41.167.195:8000/api/oss/upload'"
              :limit="1"
              class="upload-demo"
            >
              <el-button size="small" type="primary">上传视频</el-button>
              <el-tooltip placement="right-end">
                <div slot="content">
                  最大支持1G，<br />
                  支持FLV、MP4视频格式上传
                </div>
                <i class="el-icon-question" />
              </el-tooltip>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="insertUpdateReading();">保 存</el-button>
        </div>
      </el-dialog>

      <el-dialog title="修改找茬" :visible.sync="dialogQuickspotFormVisible" :before-close="handleQuickspotClose">
        <el-form ref="quickspotform" :rules="dataRule3" :model="quickspotform" label-width="120px" class="demo-ruleForm">
          <el-form-item label="第一张图片："
            prop="quickspotPicture1">
            <el-switch
              style="display: block"
              v-model="quickspotform.flag1"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="正确"
              inactive-text="错误">
            </el-switch>
            <el-upload 
            class="avatar-uploader" 
            :action="'http://121.41.167.195:8000/api/oss/upload'"
            :on-success="handleQuickspotAvatarSuccess1"
            :auto-upload="true"
            :show-file-list="false">
              <img v-if="quickspotform.quickspotPicture1" :src="quickspotform.quickspotPicture1" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <el-input
                id="errorReason1"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                style="width: 50%"
                placeholder="请输入内容"
                v-model="quickspotform.errorReason1">
              </el-input>
          </el-form-item>
          <el-form-item label="第二张图片："
            prop="quickspotPicture2">
            <el-switch
              style="display: block"
              v-model="quickspotform.flag2"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="正确"
              inactive-text="错误">
            </el-switch>
            <el-upload 
            class="avatar-uploader" 
            :action="'http://121.41.167.195:8000/api/oss/upload'"
            :on-success="handleQuickspotAvatarSuccess2"
            :auto-upload="true"
            :show-file-list="false">
              <img v-if="quickspotform.quickspotPicture2" :src="quickspotform.quickspotPicture2" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <el-input
                id="errorReason2"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                style="width: 50%"
                placeholder="请输入内容"
                v-model="quickspotform.errorReason2">
              </el-input>
          </el-form-item>
          <el-form-item label="第三张图片："
            prop="quickspotPicture3">
            <el-switch
              style="display: block"
              v-model="quickspotform.flag3"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="正确"
              inactive-text="错误">
            </el-switch>
            <el-upload 
            class="avatar-uploader" 
            :action="'http://121.41.167.195:8000/api/oss/upload'"
            :on-success="handleQuickspotAvatarSuccess3"
            :auto-upload="true"
            :show-file-list="false">
              <img v-if="quickspotform.quickspotPicture3" :src="quickspotform.quickspotPicture3" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <el-input
                id="errorReason3"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                style="width: 50%"
                placeholder="请输入内容"
                v-model="quickspotform.errorReason3">
              </el-input>
          </el-form-item>
          <el-form-item label="第四张图片："
            prop="quickspotPicture4">
            <el-switch
              style="display: block"
              v-model="quickspotform.flag4"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="正确"
              inactive-text="错误">
            </el-switch>
            <el-upload 
            class="avatar-uploader" 
            :action="'http://121.41.167.195:8000/api/oss/upload'"
            :on-success="handleQuickspotAvatarSuccess4"
            :auto-upload="true"
            :show-file-list="false">
              <img v-if="quickspotform.quickspotPicture4" :src="quickspotform.quickspotPicture4" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <el-input
                id="errorReason4"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                style="width: 50%"
                placeholder="请输入内容"
                v-model="quickspotform.errorReason4">
              </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="insertUpdateQuickspot();">保 存</el-button>
        </div>
      </el-dialog>

      <el-table
        :data="dataList"
        stripe
        v-loading="dataListLoading"
        style="width: 100%"
      >
        <el-table-column prop="id" label="生字id" width="180">
        </el-table-column>
        <el-table-column prop="name" label="生字名称" width="180">
        </el-table-column>
        <el-table-column prop="typeface" label="课时图片">
            <template slot-scope="scope">
                <el-image :src="scope.row.typeface"></el-image>
          </template> </el-table-column>
        <el-table-column prop="torder" label="生字顺序" width="180">
        </el-table-column>
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="150"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="updateTypeface(scope.row)"
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="deleteTypeface(scope.row.id)"
              >删除</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="openUpdateReading(scope.row.id)"
              >修改认读</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="openUpdateQuickspot(scope.row.id)"
              >添加找茬</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页条 -->
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      simplifyOptions: [{value: '上下',label: '上下'},{value: '左右',label: '左右'}
      ,{value: '包围',label: '包围'},{value: '独体',label: '独体'},{value: '上中下',label: '上中下'}
      ,{value: '左中右',label: '左中右'}],
      chapterId: '',
      dataListLoading: false,
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      form: {
        name: '',
        typeface: '',
        torder: '',
        chalkVideo: '',
        chalkVideoDescription: '',
        penVideo: '',
        penVideoDescription: '',
        literacyVideo: '',
        // literacyVideoDescription: '',
        // chalkVideoBgm: '',
        // chalkVideoDescriptionVideo: '',
        // penVideoBgm: '',
        // penVideoDescriptionVideo: '',
        // literacyVideoBgm: '',
        // literacyVideoDescriptionVideo: '',
        updateId: '',
      },
      fileChalkVideoBgmList: [],
      fileChalkVideoDesVidList: [],
      filePenVideoBgmList: [],
      filePenVideoDesVidList: [],
      fileLiteracyVideoBgmList: [],
      fileLiteracyVideoDesVidList: [],
      dialogFormVisible: false,
      dataRule: {
        // 数据规则
        name: [{ required: true, message: "生字名称不能为空" }],
        typeface: [{ required: true, message: "生字图片不能为空" }],
        torder: [{ required: true, message: "顺序不能为空" }],
        // chalkVideo: [{ required: true, message: "粉笔视频不能为空" }],
        // chalkVideoDescription: [{ required: true, message: "粉笔视频解析不能为空" }],
        // chalkVideoBgm: [{ required: true, message: "粉笔视频背景音乐不能为空" }],
        // chalkVideoDescriptionVideo: [{ required: true, message: "粉笔视频解析音频不能为空" }],
        // penVideo: [{ required: true, message: "钢笔视频不能为空" }],
        // penVideoDescription: [{ required: true, message: "钢笔视频解析不能为空" }],
        // penVideoBgm: [{ required: true, message: "钢笔视频背景音乐不能为空" }],
        // penVideoDescriptionVideo: [{ required: true, message: "钢笔视频解析音频不能为空" }],
        // literacyVideo: [{ required: true, message: "识字视频不能为空" }],
        // literacyVideoDescription: [{ required: true, message: "识字视频解析不能为空" }],
        // literacyVideoBgm: [{ required: true, message: "识字视频背景音乐不能为空" }],
        // literacyVideoDescriptionVideo: [{ required: true, message: "识字视频解析音频不能为空" }],
      },
      fileLiteracyVideoList: [],
      filePenVideoList: [],
      fileChalkVideoList: [],
      dialogReadingFormVisible: false,
      fileVoiceList: [],
      readingform: {
        tid: '',
        pronunciation: '',
        simplify: '',
        radical: '',
        strokes: '',
        wordFormation: '',
        idiom: '',
        description: '',
        voice: '',
        movingPicture: '',
        updateId: '',
        video: '',
      },
      fileReadingVideoList: [],
      dataRule2: {
        // 数据规则
        pronunciation: [{ required: true, message: "读音不能为空" }],
        simplify: [{ required: true, message: "简体不能为空" }],
        radical: [{ required: true, message: "部首不能为空" }],
        strokes: [{ required: true, message: "笔画不能为空" }],
        wordFormation: [{ required: true, message: "组词不能为空" }],
        idiom: [{ required: true, message: "成语不能为空" }],
        description: [{ required: true, message: "基本字义不能为空" }],
        voice: [{ required: true, message: "语音不能为空" }],
        movingPicture: [{ required: true, message: "认读动图不能为空" }],
        video: [{ required: true, message: "认读视频不能为空" }],
      },
      readingUpdateType: 0,
      quickspotform: {
        tid: '',
        flag1: true,
        quickspotPicture1: '',
        flag2: true,
        quickspotPicture2: '',
        flag3: true,
        quickspotPicture3: '',
        flag4: true,
        quickspotPicture4: '',
        updateId1: '',
        updateId2: '',
        updateId3: '',
        updateId4: '',
        errorReason1: '',
        errorReason2: '',
        errorReason3: '',
        errorReason4: '',
      },
      dialogQuickspotFormVisible: false,
      dataRule3: {
        // 数据规则
        quickspotPicture1: [{ required: true, message: "图片未上传" }],
        quickspotPicture2: [{ required: true, message: "图片未上传" }],
        quickspotPicture3: [{ required: true, message: "图片未上传" }],
        quickspotPicture4: [{ required: true, message: "图片未上传" }],
      },
      dialogCalligraphyVisible: false,
      typefacceTitle: '',
    };
  },
  
  activated() {
    this.chapterId = this.$route.params.id;
    this.getTypefaceByCid();
  },

  methods: {
    // 上传前的钩子函数
    beforeAudioUpload(file) {
      const fileName = file.name;
      const fileType = fileName.substring(fileName.lastIndexOf("."));
      if (fileType !== ".mp3") {
        this.$message.error("上传音频只能是mp3!");
        return false;
      }
      return true;
    },
    beforeVideoUpload(file) {
      const fileName = file.name;
      const fileType = fileName.substring(fileName.lastIndexOf("."));
      if (fileType !== ".mp4" && fileType !== ".flv") {
        this.$message.error("上传视频频只能是mp4/flv!");
        return false;
      }
      return true;
    },
    //关闭找茬模态框
    handleQuickspotClose(done){
      this.$confirm('确认关闭？')
        .then(_ => {
          this.quickspotform.tid = '';
          this.quickspotform.flag1 = true;
          this.quickspotform.quickspotPicture1 = '';
          this.quickspotform.updateId1 = '';
          this.quickspotform.flag2 = true;
          this.quickspotform.quickspotPicture2 = '';
          this.quickspotform.updateId2 = '';
          this.quickspotform.flag3 = true;
          this.quickspotform.quickspotPicture3 = '';
          this.quickspotform.updateId3 = '';
          this.quickspotform.flag4 = true;
          this.quickspotform.quickspotPicture4 = '';
          this.quickspotform.updateId4 = '';
          done();
        })
        .catch(_ => {});
    },
    //插入或更新
    insertUpdateQuickspot(){
      this.$refs["quickspotform"].validate((valid) => {
        if (valid) {
          if(this.quickspotform.updateId1 == ''){
            //插入找茬信息数据
            this.$http({
              url: this.$http.adornUrl("/sf/cbstiffquickspot/saveList"),
              method: "post",
              data: this.$http.adornParams({
                tid: this.quickspotform.tid,
                flag1: this.quickspotform.flag1 ? 1 : 0,
                quickspotPicture1: this.quickspotform.quickspotPicture1,
                flag2: this.quickspotform.flag2 ? 1 : 0,
                quickspotPicture2: this.quickspotform.quickspotPicture2,
                flag3: this.quickspotform.flag3 ? 1 : 0,
                quickspotPicture3: this.quickspotform.quickspotPicture3,
                flag4: this.quickspotform.flag4 ? 1 : 0,
                quickspotPicture4: this.quickspotform.quickspotPicture4,
                errorReason1: this.quickspotform.errorReason1,
                errorReason2: this.quickspotform.errorReason2,
                errorReason3: this.quickspotform.errorReason3,
                errorReason4: this.quickspotform.errorReason4,
              }),
            }).then(({ data }) => {
              this.quickspotform.tid = '';
              this.quickspotform.flag1 = true;
              this.quickspotform.quickspotPicture1 = '';
              this.quickspotform.updateId1 = '';
              this.quickspotform.flag2 = true;
              this.quickspotform.quickspotPicture2 = '';
              this.quickspotform.updateId2 = '';
              this.quickspotform.flag3 = true;
              this.quickspotform.quickspotPicture3 = '';
              this.quickspotform.updateId3 = '';
              this.quickspotform.flag4 = true;
              this.quickspotform.quickspotPicture4 = '';
              this.quickspotform.updateId4 = '';
              this.quickspotform.errorReason1 = '';
              this.quickspotform.errorReason2 = '';
              this.quickspotform.errorReason3 = '';
              this.quickspotform.errorReason4 = '';
              this.dialogQuickspotFormVisible = false;
              this.$message({
                message: '添加成功!',
                type: 'success'
              });
            });
          }else{
            //更新找茬信息数据
            this.$http({
              url: this.$http.adornUrl("/sf/cbstiffquickspot/updateList"),
              method: "post",
              data: this.$http.adornParams({
                tid: this.quickspotform.tid,
                flag1: this.quickspotform.flag1 ? 1 : 0,
                quickspotPicture1: this.quickspotform.quickspotPicture1,
                updateId1: this.quickspotform.updateId1,
                flag2: this.quickspotform.flag2 ? 1 : 0,
                quickspotPicture2: this.quickspotform.quickspotPicture2,
                updateId2: this.quickspotform.updateId2,
                flag3: this.quickspotform.flag3 ? 1 : 0,
                quickspotPicture3: this.quickspotform.quickspotPicture3,
                updateId3: this.quickspotform.updateId3,
                flag4: this.quickspotform.flag4 ? 1 : 0,
                quickspotPicture4: this.quickspotform.quickspotPicture4,
                updateId4: this.quickspotform.updateId4,
                errorReason1: this.quickspotform.errorReason1,
                errorReason2: this.quickspotform.errorReason2,
                errorReason3: this.quickspotform.errorReason3,
                errorReason4: this.quickspotform.errorReason4,
              }),
            }).then(({ data }) => {
              this.quickspotform.tid = '';
              this.quickspotform.flag1 = true;
              this.quickspotform.quickspotPicture1 = '';
              this.quickspotform.updateId1 = '';
              this.quickspotform.flag2 = true;
              this.quickspotform.quickspotPicture2 = '';
              this.quickspotform.updateId2 = '';
              this.quickspotform.flag3 = true;
              this.quickspotform.quickspotPicture3 = '';
              this.quickspotform.updateId3 = '';
              this.quickspotform.flag4 = true;
              this.quickspotform.quickspotPicture4 = '';
              this.quickspotform.updateId4 = '';
              this.dialogQuickspotFormVisible = false;
              this.quickspotform.errorReason1 = '';
              this.quickspotform.errorReason2 = '';
              this.quickspotform.errorReason3 = '';
              this.quickspotform.errorReason4 = '';
              this.$message({
                message: '修改成功!',
                type: 'success'
              });
            });
          }
        }else{
          this.$message.error('有图片未上传！');
        }
      });
    },
    //打开修改找茬模态框
    openUpdateQuickspot(id){
      this.quickspotform.tid = id;
      //查询并回显
      this.$http({
        url: this.$http.adornUrl("/sf/cbstiffquickspot/getQuickspotListByTid/" + id),
        method: "get",
      }).then(({ data }) => {
        let cbStiffQuickspots = data.cbStiffQuickspots;
        
        if ( cbStiffQuickspots.length == 4 ) {
          this.quickspotform.flag1 = cbStiffQuickspots[0].flag == 1 ? true:false;
          this.quickspotform.quickspotPicture1 = cbStiffQuickspots[0].quickspotPicture;
          this.quickspotform.flag2 = cbStiffQuickspots[1].flag == 1 ? true:false;
          this.quickspotform.quickspotPicture2 = cbStiffQuickspots[1].quickspotPicture;
          this.quickspotform.flag3 = cbStiffQuickspots[2].flag == 1 ? true:false;
          this.quickspotform.quickspotPicture3 = cbStiffQuickspots[2].quickspotPicture;
          this.quickspotform.flag4 = cbStiffQuickspots[3].flag == 1 ? true:false;
          this.quickspotform.quickspotPicture4 = cbStiffQuickspots[3].quickspotPicture;
          this.quickspotform.updateId1 = cbStiffQuickspots[0].id;
          this.quickspotform.updateId2 = cbStiffQuickspots[1].id;
          this.quickspotform.updateId3 = cbStiffQuickspots[2].id;
          this.quickspotform.updateId4 = cbStiffQuickspots[3].id;
          this.quickspotform.errorReason1 = cbStiffQuickspots[0].errorReason;
          this.quickspotform.errorReason2 = cbStiffQuickspots[1].errorReason;
          this.quickspotform.errorReason3 = cbStiffQuickspots[2].errorReason;
          this.quickspotform.errorReason4 = cbStiffQuickspots[3].errorReason;
        } else {
          this.quickspotform.flag1 = true;
          this.quickspotform.quickspotPicture1 = '';
          this.quickspotform.flag2 = true;
          this.quickspotform.quickspotPicture2 = '';
          this.quickspotform.flag3 = true;
          this.quickspotform.quickspotPicture3 = '';
          this.quickspotform.flag4 = true;
          this.quickspotform.quickspotPicture4 = '';
          this.quickspotform.updateId1 = '';
          this.quickspotform.updateId2 = '';
          this.quickspotform.updateId3 = '';
          this.quickspotform.updateId4 = '';
          this.quickspotform.errorReason1 = '';
          this.quickspotform.errorReason2 = '';
          this.quickspotform.errorReason3 = '';
          this.quickspotform.errorReason4 = '';
        }
        this.dialogQuickspotFormVisible = true;
        
      });
    },
    // 第一张图片上传图片成功回调
    handleQuickspotAvatarSuccess1(response) {
      this.quickspotform.quickspotPicture1 = response.url;
    },
    // 第二张图片上传图片成功回调
    handleQuickspotAvatarSuccess2(response) {
      this.quickspotform.quickspotPicture2 = response.url;
    },
    // 第三张图片上传图片成功回调
    handleQuickspotAvatarSuccess3(response) {
      this.quickspotform.quickspotPicture3 = response.url;
    },
    // 第四张图片上传图片成功回调
    handleQuickspotAvatarSuccess4(response) {
      this.quickspotform.quickspotPicture4 = response.url;
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getTypefaceByCid();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getTypefaceByCid();
    },
    //关闭生字模态框
    handleClose(done){
      this.$confirm('确认关闭？')
        .then(_ => {
          this.form.updateId = '';
          this.form.name = '';
          this.form.torder = '';
          this.form.typeface = '';
          this.form.chalkVideo = '';
          this.form.chalkVideoDescription = '';
          this.form.penVideo = '';
          this.form.penVideoDescription = '';
          this.form.literacyVideo = '';
          // this.form.literacyVideoDescription = '';
          this.fileChalkVideoList = [];
          this.filePenVideoList = [];
          this.fileLiteracyVideoList = [];

          this.fileChalkVideoBgmList = [];
          this.fileChalkVideoDesVidList = [];
          this.filePenVideoBgmList = [];
          this.filePenVideoDesVidList = [];
          this.fileLiteracyVideoBgmList = [];
          this.fileLiteracyVideoDesVidList = [];

          // this.form.chalkVideoBgm='';
          // this.form.chalkVideoDescriptionVideo='';
          // this.form.literacyVideoBgm='';
          // this.form.literacyVideoDescriptionVideo='';
          // this.form.penVideoBgm='';
          // this.form.penVideoDescriptionVideo='';
          done();
        })
        .catch(_ => {});
    },
    //关闭认读模态框
    handleReadingClose(done){
      this.$confirm('确认关闭？')
        .then(_ => {
          this.readingform.updateId = '';
          this.readingform.pronunciation = '';
          this.readingform.simplify = '';
          this.readingform.tid = '';
          this.readingform.radical = '';
          this.readingform.strokes = '';
          this.readingform.wordFormation = '';
          this.readingform.idiom = '';
          this.readingform.description = '';
          this.readingform.voice = '';
          this.readingform.movingPicture = '';
          done();
        })
        .catch(_ => {});
    },
    //保存或插入认读
    insertUpdateReading(){
      this.$refs["readingform"].validate((valid) => {
        if (valid) {
          if(this.readingUpdateType === 0){
            //插入认读信息数据
            this.$http({
              url: this.$http.adornUrl("/sf/cbstiffreading/save"),
              method: "post",
              data: this.$http.adornParams({
                pronunciation: this.readingform.pronunciation,
                simplify: this.readingform.simplify,
                tid: this.readingform.tid,
                radical: this.readingform.radical,
                strokes: this.readingform.strokes,
                wordFormation: this.readingform.wordFormation,
                idiom: this.readingform.idiom,
                description: this.readingform.description,
                voice: this.readingform.voice,
                movingPicture: this.readingform.movingPicture,
                video: this.readingform.video,
              }),
            }).then(({ data }) => {
              this.readingform.pronunciation = '';
              this.readingform.simplify = '';
              this.readingform.tid = '';
              this.readingform.radical = '';
              this.readingform.strokes = '';
              this.readingform.wordFormation = '';
              this.readingform.idiom = '';
              this.readingform.description = '';
              this.readingform.voice = '';
              this.readingform.movingPicture = '';
              this.fileVoiceList = [];
              this.readingform.video = '';
              this.fileReadingVideoList = [];
              this.dialogReadingFormVisible = false;
              this.$message({
                message: '添加成功!',
                type: 'success'
              });
              this.getTypefaceByCid();
            });
          }else{
            //更新认读信息数据
            this.$http({
              url: this.$http.adornUrl("/sf/cbstiffreading/update"),
              method: "post",
              data: this.$http.adornParams({
                id: this.readingform.updateId,
                pronunciation: this.readingform.pronunciation,
                simplify: this.readingform.simplify,
                tid: this.readingform.tid,
                radical: this.readingform.radical,
                strokes: this.readingform.strokes,
                wordFormation: this.readingform.wordFormation,
                idiom: this.readingform.idiom,
                description: this.readingform.description,
                voice: this.readingform.voice,
                movingPicture: this.readingform.movingPicture,
                video: this.readingform.video,
              }),
            }).then(({ data }) => {
              this.readingform.updateId = '';
              this.readingform.pronunciation = '';
              this.readingform.simplify = '';
              this.readingform.tid = '';
              this.readingform.radical = '';
              this.readingform.strokes = '';
              this.readingform.wordFormation = '';
              this.readingform.idiom = '';
              this.readingform.description = '';
              this.readingform.voice = '';
              this.readingform.movingPicture = '';
              this.fileVoiceList = [];
              this.readingform.video = '';
              this.fileReadingVideoList = [];
              this.dialogReadingFormVisible = false;
              this.$message({
                message: '修改成功!',
                type: 'success'
              });
              this.getTypefaceByCid();
            });
          }
        }else{
          this.$message.error('视频或图片未上传且输入框不能为空！');
        }
      });
    },
    // 认读视频成功回调
    handleUploadReadingVideoSuccess(response, file, fileList){
      this.readingform.video = response.url;
    },
    // 认读音频点击确定的时候进行彻底删除
    handleUploadReadingVideoRemove() {
      this.readingform.video = "";
      this.fileReadingVideoList = [];
    },
    // 认读音频点击确定的时候进行彻底删除
    handleAudioRemove() {
      this.readingform.voice = "";
      this.fileVoiceList = [];
    },
    // 认读音频成功回调
    handleAudioUploadSuccess(response, file, fileList) {
      this.readingform.voice = response.url;
    },
    //上传成功后的回调函数
    handleDynamicAvatarSuccess(response) {
      this.readingform.movingPicture = response.url;
    },
    //打开修改认读模态框
    openUpdateReading(id){
      this.readingform.tid = id;
      //查询并回显
      this.$http({
        url: this.$http.adornUrl("/sf/cbstiffreading/info/" + id),
        method: "get",
      }).then(({ data }) => {
        if (data.cbStiffReading != null) {
          this.readingform.updateId = data.cbStiffReading.id;
          this.readingform.pronunciation = data.cbStiffReading.pronunciation;
          this.readingform.simplify = data.cbStiffReading.simplify;
          this.readingform.radical = data.cbStiffReading.radical;
          this.readingform.strokes = data.cbStiffReading.strokes;
          this.readingform.wordFormation = data.cbStiffReading.wordFormation;
          this.readingform.idiom = data.cbStiffReading.idiom;
          this.readingform.description = data.cbStiffReading.description;
          this.readingform.voice = data.cbStiffReading.voice;
          this.readingform.movingPicture = data.cbStiffReading.movingPicture;
          this.readingform.video = data.cbStiffReading.video;

          this.fileVoiceList = [];
          let obj = {};
          let filenamelist = data.cbStiffReading.voice.toString().split("/");
          obj['name'] = filenamelist[filenamelist.length-1];
          obj['url'] = data.cbStiffReading.voice;
          this.fileVoiceList.push(obj);

          if (data.cbStiffReading.video != null){
            this.fileReadingVideoList = [];
            obj = {};
            filenamelist = data.cbStiffReading.video.toString().split("/");
            obj['name'] = filenamelist[filenamelist.length-1];
            obj['url'] = data.cbStiffReading.voice;
            this.fileReadingVideoList.push(obj);
          }

          this.readingUpdateType = 1;
        } else {
          this.readingform.pronunciation = '';
          this.readingform.simplify = '';
          this.readingform.radical = '';
          this.readingform.strokes = '';
          this.readingform.wordFormation = '';
          this.readingform.idiom = '';
          this.readingform.description = '';
          this.readingform.voice = '';
          this.readingform.movingPicture = '';
          this.fileVoiceList = [];
          this.readingform.video = '';
          this.fileReadingVideoList = [];
          this.readingUpdateType = 0;
        }
        this.dialogReadingFormVisible = true;
      });
    },
    //删除字体
    deleteTypeface(id){
      this.$confirm(`确定对[生字id=${id}]进行[删除]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          this.$http({
            url: this.$http.adornUrl("/sf/cbstifftypeface/delete"),
            method: "post",
            data: this.$http.adornData([id], false),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "删除成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getTypefaceByCid();
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {});
    },
    //修改字体
    updateTypeface(row){
      this.form.name = row.name;
      this.form.torder = row.torder;
      this.form.typeface = row.typeface;
      this.form.chalkVideo = row.chalkVideo;
      this.form.chalkVideoDescription = row.chalkVideoDescription;
      this.form.penVideo = row.penVideo;
      this.form.penVideoDescription = row.penVideoDescription;
      this.form.literacyVideo = row.literacyVideo;
      this.form.updateId = row.id;
      // this.form.literacyVideoDescription = row.literacyVideoDescription;
      // this.form.chalkVideoBgm = row.chalkVideoBgm;
      // this.form.chalkVideoDescriptionVideo = row.chalkVideoDescriptionVideo;
      // this.form.literacyVideoBgm = row.literacyVideoBgm;
      // this.form.literacyVideoDescriptionVideo = row.literacyVideoDescriptionVideo;
      // this.form.penVideoBgm = row.penVideoBgm;
      // this.form.penVideoDescriptionVideo = row.penVideoDescriptionVideo;

      this.fileChalkVideoList = [];
      this.filePenVideoList = [];
      this.fileLiteracyVideoList = [];
      let obj = {};
      let filenamelist = row.chalkVideo.toString().split("/");
      obj['name'] = filenamelist[filenamelist.length-1];
      obj['url'] = row.chalkVideo;
      this.fileChalkVideoList.push(obj);
      obj = {};
      filenamelist = row.penVideo.toString().split("/");
      obj['name'] = filenamelist[filenamelist.length-1];
      obj['url'] = row.penVideo;
      this.filePenVideoList.push(obj);
      obj = {};
      filenamelist = row.literacyVideo.toString().split("/");
      obj['name'] = filenamelist[filenamelist.length-1];
      obj['url'] = row.literacyVideo;
      this.fileLiteracyVideoList.push(obj);

      this.fileChalkVideoBgmList = [];
      this.fileChalkVideoDesVidList = [];
      this.filePenVideoBgmList = [];
      this.filePenVideoDesVidList = [];
      this.fileLiteracyVideoBgmList = [];
      this.fileLiteracyVideoDesVidList = [];

      // obj = {};
      // filenamelist = row.chalkVideoBgm.toString().split("/");
      // obj['name'] = filenamelist[filenamelist.length-1];
      // obj['url'] = row.chalkVideoBgm;
      // this.fileChalkVideoBgmList.push(obj);
      // obj = {};
      // filenamelist = row.chalkVideoDescriptionVideo.toString().split("/");
      // obj['name'] = filenamelist[filenamelist.length-1];
      // obj['url'] = row.chalkVideoDescriptionVideo;
      // this.fileChalkVideoDesVidList.push(obj);
      // obj = {};
      // filenamelist = row.literacyVideoBgm.toString().split("/");
      // obj['name'] = filenamelist[filenamelist.length-1];
      // obj['url'] = row.literacyVideoBgm;
      // this.filePenVideoBgmList.push(obj);
      // obj = {};
      // filenamelist = row.literacyVideoDescriptionVideo.toString().split("/");
      // obj['name'] = filenamelist[filenamelist.length-1];
      // obj['url'] = row.literacyVideoDescriptionVideo;
      // this.filePenVideoDesVidList.push(obj);
      // obj = {};
      // filenamelist = row.penVideoBgm.toString().split("/");
      // obj['name'] = filenamelist[filenamelist.length-1];
      // obj['url'] = row.penVideoBgm;
      // this.fileLiteracyVideoBgmList.push(obj);
      // obj = {};
      // filenamelist = row.penVideoDescriptionVideo.toString().split("/");
      // obj['name'] = filenamelist[filenamelist.length-1];
      // obj['url'] = row.penVideoDescriptionVideo;
      // this.fileLiteracyVideoDesVidList.push(obj);

      this.typefacceTitle = '修改生字';
      this.dialogFormVisible = true;
    },
    // 删除之前，就是点击x的时候
    beforeVodRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    //更新或添加字体
    insertTypeface(){
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if(this.form.updateId == ''){
            this.$http({
              url: this.$http.adornUrl("/sf/cbstifftypeface/save"),
              method: "post",
              data: this.$http.adornParams({
                name: this.form.name,
                torder: this.form.torder,
                cid: this.chapterId,
                typeface: this.form.typeface,
                chalkVideo: this.form.chalkVideo,
                chalkVideoDescription: this.form.chalkVideoDescription,
                penVideo: this.form.penVideo,
                penVideoDescription: this.form.penVideoDescription,
                literacyVideo: this.form.literacyVideo,
                // literacyVideoDescription: this.form.literacyVideoDescription,
                // chalkVideoBgm: this.form.chalkVideoBgm,
                // chalkVideoDescriptionVideo: this.form.chalkVideoDescriptionVideo,
                // literacyVideoBgm: this.form.literacyVideoBgm,
                // literacyVideoDescriptionVideo: this.form.literacyVideoDescriptionVideo,
                // penVideoBgm: this.form.penVideoBgm,
                // penVideoDescriptionVideo: this.form.penVideoDescriptionVideo,
              }),
            }).then(({ data }) => {
              this.form.name = '';
              this.form.torder = '';
              this.form.typeface = '';
              this.form.chalkVideo = '';
              this.form.chalkVideoDescription = '';
              this.form.penVideo = '';
              this.form.penVideoDescription = '';
              this.form.literacyVideo = '';

              this.fileChalkVideoList = [];
              this.filePenVideoList = [];
              this.fileLiteracyVideoList = [];
              // this.form.literacyVideoDescription = '';
              // this.form.chalkVideoBgm='';
              // this.form.chalkVideoDescriptionVideo='';
              // this.form.literacyVideoBgm='';
              // this.form.literacyVideoDescriptionVideo='';
              // this.form.penVideoBgm='';
              // this.form.penVideoDescriptionVideo='';
              this.dialogFormVisible = false;
              this.$message({
                message: '添加成功!',
                type: 'success'
              });
              this.getTypefaceByCid();
            });
          }else{
            this.$http({
              url: this.$http.adornUrl("/sf/cbstifftypeface/update"),
              method: "post",
              data: this.$http.adornParams({
                id: this.form.updateId,
                name: this.form.name,
                torder: this.form.torder,
                cid: this.chapterId,
                typeface: this.form.typeface,
                chalkVideo: this.form.chalkVideo,
                chalkVideoDescription: this.form.chalkVideoDescription,
                penVideo: this.form.penVideo,
                penVideoDescription: this.form.penVideoDescription,
                literacyVideo: this.form.literacyVideo,
                // literacyVideoDescription: this.form.literacyVideoDescription,
                // chalkVideoBgm: this.form.chalkVideoBgm,
                // chalkVideoDescriptionVideo: this.form.chalkVideoDescriptionVideo,
                // literacyVideoBgm: this.form.literacyVideoBgm,
                // literacyVideoDescriptionVideo: this.form.literacyVideoDescriptionVideo,
                // penVideoBgm: this.form.penVideoBgm,
                // penVideoDescriptionVideo: this.form.penVideoDescriptionVideo,
              }),
            }).then(({ data }) => {
              this.form.updateId = '';
              this.form.name = '';
              this.form.torder = '';
              this.form.typeface = '';
              this.form.chalkVideo = '';
              this.form.chalkVideoDescription = '';
              this.form.penVideo = '';
              this.form.penVideoDescription = '';
              this.form.literacyVideo = '';
              this.fileChalkVideoList = [];
              this.filePenVideoList = [];
              this.fileLiteracyVideoList = [];
              // this.form.literacyVideoDescription = '';
              // this.form.chalkVideoBgm='';
              // this.form.chalkVideoDescriptionVideo='';
              // this.form.literacyVideoBgm='';
              // this.form.literacyVideoDescriptionVideo='';
              // this.form.penVideoBgm='';
              // this.form.penVideoDescriptionVideo='';
              this.dialogFormVisible = false;
              this.$message({
                message: '修改成功!',
                type: 'success'
              });
              this.getTypefaceByCid();
            });
          }
        }else{
          this.$message.error('视频、音频或图片未上传且输入框不能为空！');
        }
      });
    },
    // 识字视频成功回调
    handleUploadLiteracyVideoSuccess(response, file, fileList) {
      this.form.literacyVideo = response.url;
    },
    // 识字视频背景音乐成功回调
    handleUploadLiteracyVideoBgmSuccess(response, file, fileList) {
      this.form.literacyVideoBgm = response.url;
    },
    // 识字视频解析音频成功回调
    handleUploadLiteracyVideoDesVidSuccess(response, file, fileList) {
      this.form.literacyVideoDescriptionVideo = response.url;
    },
    // 点击确定的时候进行彻底删除
    handleUploadLiteracyVideoRemove() {
      this.form.literacyVideo = "";
      this.fileLiteracyVideoList = [];
    },
    // 点击确定的时候进行彻底删除
    handleUploadLiteracyVideoBgmRemove() {
      this.form.literacyVideoBgm = "";
      this.fileLiteracyVideoBgmList = [];
    },
    // 点击确定的时候进行彻底删除
    handleUploadLiteracyVideoDesVidRemove() {
      this.form.literacyVideoDescriptionVideo = "";
      this.fileLiteracyVideoDesVidList = [];
    },
    // 钢笔视频成功回调
    handleUploadPenVideoSuccess(response, file, fileList) {
      this.form.penVideo = response.url;
    },
    // 钢笔视频背景音乐成功回调
    handleUploadPenVideoBgmSuccess(response, file, fileList) {
      this.form.penVideoBgm = response.url;
    },
    // 钢笔视频解析音频成功回调
    handleUploadPenVideoDesVidSuccess(response, file, fileList) {
      this.form.penVideoDescriptionVideo = response.url;
    },
    // 点击确定的时候进行彻底删除
    handleUploadPenVideoRemove() {
      this.form.penVideo = "";
      this.filePenVideoList = [];
    },
    // 点击确定的时候进行彻底删除
    handleUploadPenVideoBgmRemove() {
      this.form.penVideoBgm = "";
      this.filePenVideoBgmList = [];
    },
    // 点击确定的时候进行彻底删除
    handleUploadPenVideoDesVidRemove() {
      this.form.penVideoDescriptionVideo = "";
      this.filePenVideoDesVidList = [];
    },
    // 粉笔视频成功回调
    handleUploadChalkVideoSuccess(response, file, fileList) {
      this.form.chalkVideo = response.url;
    },
    // 粉笔视频背景音乐成功回调
    handleUploadChalkVideoBgmSuccess(response, file, fileList) {
      this.form.chalkVideoBgm = response.url;
    },
    // 粉笔视频解析音频成功回调
    handleUploadChalkVideoDesVidSuccess(response, file, fileList) {
      this.form.chalkVideoDescriptionVideo = response.url;
    },
    // 点击确定的时候进行彻底删除
    handleUploadChalkVideoRemove() {
      this.form.chalkVideo = "";
      this.fileChalkVideoList = [];
    },
    // 点击确定的时候进行彻底删除
    handleUploadChalkVideoBgmRemove() {
      this.form.chalkVideoBgm = "";
      this.fileChalkVideoBgmList = [];
    },
    // 点击确定的时候进行彻底删除
    handleUploadChalkVideoDesVidRemove() {
      this.form.chalkVideoDescriptionVideo = "";
      this.fileChalkVideoDesVidList = [];
    },
    // 视图上传多于一个视频
    handleUploadExceed(files, fileList) {
      this.$message.warning("想要重新上传视(音)频，请先删除已上传的视(音)频");
    },
    //上传成功后的回调函数
    handleAvatarSuccess(response) {
      this.form.typeface = response.url;
    },
    //添加生字学习
    addTypeface(){
      this.typefacceTitle = '添加生字';
      this.dialogFormVisible = true;
    },
    getTypefaceByCid(){
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/sf/cbstifftypeface/list"),
        method: "get",
        params: this.$http.adornParams({
          cid: this.chapterId,
          page: this.pageIndex,
          limit: this.pageSize,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.stiffTypefacePage.records;
          this.totalPage = data.stiffTypefacePage.total;
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },
  },
};
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
